<template>
	<div class="zz-container">

		<div class="default-w">
			<!-- 操作 -->
			<el-row v-show="forms.length">
				<el-col :span="12">
					<el-button type="primary" icon="el-icon-plus" @click="handler('insert')">添加字段</el-button>
					<el-button type="success" icon="el-icon-document" @click="handler('save')">提交</el-button>
					<el-button type="info" icon="el-icon-refresh" @click="handler('reset')">重置</el-button>
				</el-col>
			</el-row>

			<!-- 表单 -->
			<div style="width:700px;margin: 15px 0;">
				<el-row>
					<el-col :span="17">
						<el-input v-model="url" placeholder="请输入请求地址，例如：rest/bdcbspt_XXXXXX/query/MH_GY_JDCX"></el-input>
					</el-col>
				</el-row>
				<el-row v-for="(item, index) in forms" :key="index">
					<el-col :span="5">
						<el-input v-model="item.key" placeholder="请输入字段名称"></el-input>
					</el-col>
					<el-col :span="12">
						<el-input v-model="item.value" placeholder="请输入值"></el-input>
					</el-col>
					<el-col :span="4">
						<el-link type="danger" @click="handler('delete', index)" v-if="index">删除</el-link>
					</el-col>
				</el-row>
			</div>

			<!-- 返回结果 -->
			<p v-show="response" style="color: #06B4FD;padding: 0; margin: 15px 0 0;">响应(response)：</p>
			<div v-show="response" style="border: 1px solid #06B4FD; border-radius: 5px;margin-top: 5px;padding: 10px;">
				{{response}}
			</div>
		</div>
		
		<!-- 表单 zhang-->
		<div class="default-w" v-if="false">
			<fieldset id="" style="border: 1px solid #999">
				<legend>表单（form）</legend>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
					<!-- 表单子选项 -->
					<el-form-item label="用户" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					
					
					<el-form-item label="活动区域" prop="region">
						<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动时间" required>
						<el-col :span="11">
							<el-form-item prop="date1">
								<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item prop="date2">
								<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label="即时配送" prop="delivery">
						<el-switch v-model="ruleForm.delivery"></el-switch>
					</el-form-item>
					<el-form-item label="活动性质" prop="type">
						<el-checkbox-group v-model="ruleForm.type">
							<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
							<el-checkbox label="地推活动" name="type"></el-checkbox>
							<el-checkbox label="线下主题活动" name="type"></el-checkbox>
							<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="特殊资源" prop="resource">
						<el-radio-group v-model="ruleForm.resource">
							<el-radio label="线上品牌商赞助"></el-radio>
							<el-radio label="线下场地免费"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="活动形式" prop="desc">
						<el-input type="textarea" v-model="ruleForm.desc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submit('ruleForm')">立即创建</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</fieldset>
		</div>
	
		<!-- component标签 -->
		<!-- is 用于动态组件 -->
		<!-- <component :is="componentId"></component> -->
		<div class="default-w">		
			<fieldset style="border: 1px solid #999">
				<legend title="还是子组件">component标签</legend>
					<keep-alive>
						<component 
							:is="currentComponent"  
							:componentParams="componentParams" 
							@next="next" 
							@back="back"/>
					</keep-alive>
			</fieldset>
			<hr>

			<!-- 组件间通信 -->
			<fieldset style="border: 1px solid #999">
				<legend title="还是子组件">我是父组件</legend>
				<child ref="child" 
					:model="componentModel"
					@eventHandle="eventFn"/>
				<hr>
				<input type="button" value="调用子组件的方法" @click="$refs.child.parentHandle('parent')">
			</fieldset>

			
			<h3>组件间通信方式</h3>
			<ul style="line-height: 1.75;font-size: 14px;">
				<li>通过 props 传递【父组件传给子组件】</li>
				<li>通过 $emit 触发自定义事件【子组件传给父组件】</li>
				<li>使用 ref 【父组件使用子组件】</li>
				<li>$parent 或$root【子组件调用父组件】</li>
				<li>EventBus【兄弟组件】</li>
				<li>attrs 与 listeners 【祖先传递数据给子孙】</li>
				<li>Provide 与 Inject 【祖孙之间进行传递】</li>
				<li>Vuex 【复杂关系的组件数据传递】</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import child from '@/pages/views/vue/component/child'
	import stepOne from '@/pages/views/vue/component/stepOne'
	import stepTwo from '@/pages/views/vue/component/stepTwo'
	import stepThree from '@/pages/views/vue/component/stepThree'
	export default {
		components: {
      child,
			stepOne,
			stepTwo,
			stepThree
		},
		data() {
			return {
				componentModel: undefined,
				currentComponent: null,		// 当前组件
				componentParams: {},		// 组件间传递的参数
				form: {},
				forms: [{
					key: '',
					value: ''
				}],
				url: '',
				response: null,
				valid: true,
				num: 0,
				array: [],
				// 表单
				ruleForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				// 校验
				rules: {
					// 字段名称
					name: [
						{
							required: true,
							message: '请输入活动名称',
							trigger: 'change'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'change'
						}
					],
					region: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					date2: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.currentComponent = 'stepOne';
			this.componentParams.name = '这是组件component控制中心';
			this.componentParams.step = '这是component标签';
		},
		mounted() {
			console.info('componentParams >>' + JSON.stringify(this.componentParams));
		},
		methods: {
			// 子组件调用 XXX
			childHandle(param) {
				console.log('子组件调用了该方法' + param);
			},
			// 
			eventFn(value) {
				console.log(value)
			},
			// https://www.kancloud.cn/mrxuxu/vue_js/821508
			/****************************************************  
			 * 下一步
			 */
			next(step, params) {
				if (step === 2) {
					this.currentComponent = 'stepTwo';
				}
				if (step === 3) {
					this.currentComponent = 'stepThree';
				}
				this.componentParams = params;
			},
			/**
			 * 上一步
			 */
			back(step, params) {
				if (step === 1) {
					this.currentComponent = 'stepOne';
				}
				if (step === 2) {
					this.currentComponent = 'stepTwo';
				}
				this.componentParams = params;
			},
			
			/****************************************************************************************
			/**
			 * 提交
			 */
			submit() {
				let valid = this.validate('ruleForm');	
				console.log(valid);
				console.log(this.ruleForm);
			},
			
			/**
			 * 表单校验
			 */
			validate(formName) {
				let flag = true;
				this.$refs[formName].validate((valid) => {
					flag = valid ? flag : !flag;					
				});
				return flag;
			},

			
			/**
			 * 重置表单
			 */
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			
			validatePic(...argus) {
				console.log(argus[0]);
			},

			// 操作
			handler(type, index) {
				if(type === 'insert') {
					this.forms.push({
						key: '',
						vakue: '',
					});
				}
				if(type === 'delete') {
					this.forms.splice(index, 1);
				}
				if(type === 'update') {

				}
				if(type === 'save') {
					this.doInsert();
				}
				if(type === 'reset') {
					this.forms = [{
						key: '',
						value: ''
					}];
					this.response = null;
					this.url = null;
				}
			},

			// 插入数据
			doInsert() {
				// 校验
				let flag = true;
				if(!this.url) {
					this.utils.alert('请求地址不能为空。');
					return;
				}
				for(let i = 0; i < this.forms.length; i++) {
					if(!this.forms[i].key) {
						this.utils.alert('表单填写字段不完整，请检查');
						flag = false;
						break;
					}
				}
				if(!flag) return;

				// 组装数据
				let params = {};
				this.forms.forEach((item) => {
					params[item.key] = item.value || '';
				});

				// post请求
				this.$axios.get(this.url, params).then((res) => {
					this.response = res;
				}).catch((err) => {
					this.response = err.response;
				});
			},

		}
	}
</script>
<style lang="less" scoped="scoped">
	.zz-container {
		min-height: 550px;
        background-color: #fff;
        padding: 15px;
	}
	
	/deep/ .el-row {
		margin-bottom: 10px;
	}
	
	/deep/ .el-link {
		position: relative;
		top: 10px;
	}
	
	/deep/ .el-col {
		padding-right: 15px;
	}
</style>